<script setup lang="ts">
import type { detailesType } from "@/type/typings"
import { useRouter } from "vue-router"
interface TimeType extends detailesType {
  collectTime?: number,
  readTime?: number
}
const router = useRouter();
const props = defineProps<{
  item: TimeType
}>();
console.log(props.item);

const sloveTime = (time: number) => {
  let temp = new Date(time);
  let cat = `${temp.getFullYear()}-${temp.getMonth() + 1}-${temp.getDate()} ${temp.getHours() < 10 ? '0' + temp.getHours() : temp.getHours()}:${temp.getMinutes() < 10 ? '0' + temp.getMinutes() : temp.getMinutes()}:${temp.getSeconds() < 10 ? '0' + temp.getSeconds() : temp.getSeconds()}`
  return cat;
}
const toDetail = () => {
  router.push({
    name: "detail",
    params: {
      id: props.item.id
    },
  })
}
</script>
<template>
  <div class="collect-item" @click.stop="toDetail">
    <div class="time">{{ sloveTime(props.item.collectTime as number || props.item.readTime as number) }}</div>
    <div class="item-content">
      <div class="img-box">
        <img :src="props.item.detailPic[0]" alt="">
      </div>
      <div class="right">
        <div class="my-text title">{{ props.item.fullName }}</div>
        <div class="tags">
          <div class="tag" v-for="(tag, index) in props.item.tags">{{ tag }}<span
              v-if="index != props.item.tags.length - 1">|</span></div>
        </div>
        <div class="price">
          <div class="price-o">{{ props.item.salesPrice / 100 }}</div>
          <div class="price-p">{{ props.item.referencePrice / 100 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.collect-item {
  width: 100%;

  .time {
    width: 100%;
    height: .38rem;
    box-sizing: border-box;
    padding: 0 .1rem;
    line-height: .38rem;
    font-size: .14rem;
    background-color: var(--bgc-gray);
    color: var(--text-gray);
  }

  .item-content {
    width: 100%;
    background-color: var(--bgc-white);
    display: flex;
    padding: .1rem;
    box-sizing: border-box;

    .img-box {
      width: .7rem;
      min-width: .7rem;
      height: .7rem;
      border-radius: .06rem;
      overflow: hidden;
    }

    .right {
      flex-grow: 1;
      margin-left: .1rem;

      .title {
        font-size: .15rem;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;

        .tag {
          font-size: .12rem;
          color: var(--text-gray);

          >span {
            margin: 0 .05rem;
          }
        }
      }

      .price {
        display: flex;
        align-items: center;
        font-size: .15rem;
        margin-top: .05rem;

        .price-o {
          font-weight: bold;
          color: var(--text-red);
          margin-right: .05rem;
        }

        .price-p {
          font-size: .13rem;
          color: var(--text-gray);
          text-decoration: line-through;
        }
      }
    }
  }
}</style>